import React from 'react';
import './App.css';
import './assets/css/Common.less';
import { HashRouter as Router, Switch, Route } from 'react-router-dom';
import Login from 'pages/Login/index';
import Layout from 'components/common/Layout';
import UserManager from 'pages/UserManage/index';
import Home from 'pages/Home/index'
import PileConfig from 'pages/PileConfig/index';
import MonitorConfig from 'pages/MonitorConfig';
import OperationCheck from 'pages/OperationCheck';
import OperationRecord from 'pages/OperationRecord';
import EventRecord from 'pages/EventRecord';
const routes = [
    {
        path: '/login',
        component: Login,
        exact: 'true',
    },
    {
        path: '/',
        component: Layout,
        children: [
            {
                path: '/home',
                component: Home,
            },
            {
                path: '/userManage',
                component: UserManager
            },
            {
                path: '/pileConfig',
                component: PileConfig
            },
            {
                path: '/monitorConfig',
                component: MonitorConfig
            },
            {
                path: '/operationCheck',
                component: OperationCheck
            },
            {
                path: '/operationRecord',
                component: OperationRecord
            },
            {
                path: '/eventRecord',
                component: EventRecord
            }
        ],
    },
];

function RouteWithSubRoutes(route: any) {
    return (
        <Route
            path={route.path}
            render={(props) => <route.component {...props} routes={route.routes}>
                {route.children ? route.children.map((child: any, i: any) => (
                    /** 递归传入子组件 */
                    <RouteWithSubRoutes key={i} {...child} />
                )) : ''}
            </route.component>}
        />
    );
}

function App() {
    return (
        <div className="App">
            <Router>
                <div style={{ width: '100%' }}>
                    <Switch>
                        {routes.map((route, i) => (
                            <RouteWithSubRoutes key={i} {...route} />
                        ))}
                    </Switch>
                </div>
            </Router>
        </div>
    );
}

export default App;
